<script setup lang='ts'>
import Menu from "../menu/index.vue"
//获取父组件传递过来的全部路由数据
defineProps({
    menuList: Object,
})


</script>
<script lang="ts">

</script>

<template>
    <div class="menu-container">


        <!--没有子路由-->
        <el-menu>
            <template v-for="(item) in menuList" :key="item.path">
                <!--没有子路由-->
                <template v-if="!item.mate.hidden">
                    <el-menu-item v-if="!item.children" :index="item.path">
                        <template #title>
                            <span>{{ item.mate.title }}</span>
                        </template>
                    </el-menu-item>
                    <!--只有一个子路由-->
                    <el-menu-item v-if="item.children && item.children.length == 1" :index="item.path">
                        <template #title>
                            <span>{{ item.children[0].mate.title }}</span>
                        </template>
                    </el-menu-item>
                    <!--有多个子路由-->
                    <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path">
                        <template #title>{{ item.mate.title }}</template>
                        <Menu :menuList="item.children"></Menu>
                    </el-sub-menu>
                </template>
            </template>
        </el-menu>

    </div>
</template>



<style lang="less" scoped></style>